<template>
  <!--布局容器-->
  <el-container>
    <el-header>
      <h1>新增考试</h1>
    </el-header>
    <el-main>
      <!--考试表单-->
      <el-form :inline="true" class="demo-form-inline" >
        <el-form-item label="考试名称">
          <el-input v-model="parameter.examName" placeholder="请输入考试名称"></el-input>
        </el-form-item>

        <el-form-item label="起止时间">
          <el-date-picker
            v-model="parameter.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="截止时间">
          <el-date-picker
            v-model="parameter.endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <h3>请选择试卷</h3>
      <!--试卷表格-->
      <el-table :data="paperPage.list" style="width: 100%" :row-key="testPaper" @selection-change="selectPaper">
        <el-table-column type="selection" width="100" :reserve-selection="true" ></el-table-column>
        <el-table-column prop="paperId" label="编号" width="100"></el-table-column>
        <el-table-column prop="paperName" label="试卷名称" width="500"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChangePaper"
        @current-change="handleCurrentChangePaper"
        :current-page="paperPage.page"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="paperPage.row"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paperPage.total">
      </el-pagination>

      <h3>请选择考生</h3>
      <!--考生表格-->
      <el-table :data="userPage.list" style="width: 100%" :row-key="testUser" @selection-change="selectUser">
        <el-table-column type="selection" width="100" :reserve-selection="true" ></el-table-column>
        <el-table-column prop="userId" label="编号" width="100"></el-table-column>
        <el-table-column prop="userName" label="考生名称" width="500"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChangeUser"
        @current-change="handleCurrentChangeUser"
        :current-page="userPage.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="userPage.row"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userPage.total">
      </el-pagination>

        <el-button type="success" @click="addExam">新增考试</el-button>

    </el-main>


  </el-container>

</template>

<script>
  export default {
    name: "ExamCreate",
    data(){
      return{
        parameter:{//考试新增参数
          examName:"test01",
          startTime:"1900-01-01 09:00:00",
          endTime:"1900-01-01 09:00:00",
          userId:[],
          paperId:[]
        },
        userPage:{
          list:[],//用户id集合
          page:1,
          row:2,
          total:0,
          totalPage:0,
        },
        paperPage:{
          list:[],//试卷集合
          page:1,
          row:2,
          total:0,
          totalPage:0,
        },

      }
    },
    methods:{
      queryUser(){  // 用户查询
        const self = this;
        this.$http.get("/server-exam-manager/user-info/user",
          {params:{
              "page":this.userPage.page,
              "row":this.userPage.row,
              "roleName":"考生"//等登录完成后，从登录用户信息查询用户角色
          }})
          .then(function (rs) {
            console.log(rs.data)
            self.userPage.list = rs.data.data.list;
            self.userPage.total = rs.data.data.total;
            self.userPage.totalPage = rs.data.data.totalPage;
          })
      },
      queryPaper(){  // 查询试卷
        const self = this;
        this.$http.get("/server-exam-manager/exam/paper",
          {params:{
            "page":this.paperPage.page,
              "row":this.paperPage.row,
          }
          })
          .then(function (rs) {
            self.paperPage.list = rs.data.data.list;
            self.paperPage.total = rs.data.data.total;
            self.paperPage.totalPage = rs.data.data.totalPage;
          })
      },
      handleSizeChangeUser(v){//下拉框触发事件函数
        this.userPage.row = v;
        this.queryUser();
      },
      handleCurrentChangeUser(page){//点击页吗触发的函数
        this.userPage.page = page;
        this.queryUser();
      },
      selectUser(v){ //user
        console.log(v)
        //清空数组
        this.parameter.userId=[];
        for(var i =0;i<v.length;i++){
          this.parameter.userId.push(v[i].userId);
        }
        console.log(this.parameter.userId);
      },
      testUser(row){
        //console.log(row);
        return row.userId;
      },
      handleSizeChangePaper(v){//下拉框触发事件函数
        this.paperPage.row = v;
        this.queryPaper();
      },
      handleCurrentChangePaper(page){//点击页吗触发的函数
        this.paperPage.page = page;
        this.queryPaper();
      },
      selectPaper(v){ //user
        console.log(v)
        //清空数组
        this.parameter.paperId=[];
        for(var i =0;i<v.length;i++){
          this.parameter.paperId.push(v[i].paperId);
        }
        console.log(this.parameter.paperId);
      },
      testPaper(row){
        //console.log(row);
        return row.paperId;
      },
      addExam(){
        const self = this;
        console.log(this.parameter)
        this.$http.post("/server-exam-manager/exam/exam",this.parameter)
        .then(function (rs) {
            self.$alert(rs.data.msg);
        })
      }

    },
    created() {
      this.queryUser();
      this.queryPaper();
    }

  }
</script>

<style scoped>

</style>
